<template>
  <div class="laber1">
    <!-- <el-button type="primary">主要按钮</el-button> -->
    <h2>设备详情</h2>
    <el-table
      :data="tableData1"
      style="width: 100%"
      border
      :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
    >
      <el-table-column prop="deviceName" label="设备名称" align="center">
      </el-table-column>
      <el-table-column prop="deviceModel" label="设备型号" align="center">
      </el-table-column>
      <el-table-column prop="deviceDate" label="生产日期" align="center">
      </el-table-column>
      <el-table-column prop="deviceSupplier" label="供应商" align="center">
      </el-table-column>
      <el-table-column prop="deviceWorkshop" label="生产车间" align="center">
      </el-table-column>
      <el-table-column prop="deviceUser" label="设备使用人" align="center">
      </el-table-column>
      <el-table-column prop="deviceManager" label="设备负责人" align="center">
      </el-table-column>
      <el-table-column prop="deviceCheck" label="点检位置" align="center">
      </el-table-column>
      <el-table-column prop="deviceRound" label="维保周期（天）" align="center">
      </el-table-column>
      <el-table-column
        prop="deviceDeadline"
        label="维保到期时间(天）"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="deviceLasttime"
        label="上次维保时间"
        align="center"
      ></el-table-column>
    </el-table>
    <h2>设备维保信息</h2>
    <el-table
      :data="tableData2"
      style="width: 100%"
      border
      :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
    >
      <el-table-column prop="id" label="序号" align="center"> </el-table-column>
      <el-table-column prop="deviceName" label="设备名称" align="center">
      </el-table-column>
      <el-table-column prop="deviceMaintype" label="维保类型" align="center">
      </el-table-column>
      <el-table-column prop="deviceCheckpoint" label="维保方式" align="center">
      </el-table-column>
      <el-table-column prop="deviceCheckreason" label="维保原因" align="center">
      </el-table-column>
      <el-table-column prop="deviceChecktime" label="维保时间" align="center">
      </el-table-column>
      <el-table-column
        prop="deviceCheckman"
        label="维保人"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="deviceCheckuse"
        label="维保时长"
        align="center"
      ></el-table-column>
    </el-table>
    <h2>设备故障信息</h2>
    <el-table
      :data="tableData3"
      style="width: 100%"
      border
      :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
    >
      <el-table-column prop="deviceName" label="设备名称" align="center">
      </el-table-column>
      <el-table-column prop="faultPosition" label="故障位置" align="center">
      </el-table-column>
      <el-table-column prop="deviceWorkshop" label="设备车间" align="center">
      </el-table-column>
      <el-table-column prop="deviceManager" label="设备负责人" align="center">
      </el-table-column>
      <el-table-column prop="resolved" label="状态" align="center">
      </el-table-column>
      <el-table-column
        prop="faultTime"
        label="故障日期"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { detailMes, mainTenanceMes, fau } from "@/api/system/manage";
export default {
  name: "xq",
  data() {
    return {
      tableData1: [],
      tableData2: [],
      tableData3: [],
    };
  },
  methods: {
    getList(id) {
      mainTenanceMes(id).then((res) => {
        console.log("结果2", res.data);
        this.tableData2 = res.data;
      });
      fau(id).then((res) => {
        console.log("结果3", res.data);
        this.tableData3 = res.data;
      });
      detailMes(id).then((res) => {
        this.tableData1 = res.data;
        console.log("结果1", res.data);
      });
    },
    // detailMes(id).then((res) => {
    //   console.log(res.data);
    //   this.tableData = res.data;
    //   for (let i in this.tableData) {
    //     this.tableData1.push(this.tableData[i]);
    //   }
    //   console.log("yyds", this.tableData1);
    // });
  },
  mounted() {
    // 通过$route.query将传过来的值接收;
    let id = this.$route.query.listId;
    this.tableData = this.$route.query.manageList;
    this.getList(id);
  },
};
</script>

<style>
h2 {
  font-size: 35px;
  text-align: center;
  color: #0072c6;
}
.laber1 {
  margin-left: 30px;
  margin-right: 30px;
}
</style>
